<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="fn1">点我啊</button>
        <p>{{ money }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            // 找到某个大盒子交给vue管理
            el: '#app',
            // datavue里面声明数据的地方
            data () {
                return {
                    money: 100
                }
            },
            // vue里面声明函数的方法
            methods: {
                fn1 () {
                    // 如果在js中访问vue里的数据，前面要加this
                    console.log('点我干啥？', this.money)
                    // 回忆一下：在以前webapi中，事件里是有this的
                    // this就是当前绑定这个事件的元素（照理说webapi中this应该是这个按钮）
                    // 但是在vue中可不是这个意思了,它是指当前vue实例
                    // 因此你要访问当前实例里的money，那就在前面要加this
                    // this.money来访问
                    // 所以通过这个也能发现框架的特点：有自己的语法规则，可能会改变我们原本的开发模式
                    // console.log(this)
                    // 在vue中还有一个特点：数据一变，界面会自动变
                    // 所以以后在vue中我们根本不需要关注界面，只要关注数据变化即可
                    this.money += 100
                }
            }
        })
    </script>
</body>
</html>